<template>
  <!-- 主体布局 -->
  <div class="login_container">
    <!-- 登录区域 -->
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../../assets/images/login-avator.png" alt="图片加载失败" />
      </div>
      <!-- 登录区域,绑定form表单的模型为LoginForm,rules是指验证的规则，名字自定义 -->
      <el-form
        :model="LoginForm"
        :rules="LoginForm_Rule"
        ref="LoginFormRef"
        label-width="0px"
        class="login_form"
      >
        <!--用户名 v-model：双向绑定 -->
        <el-form-item prop="username">
          <el-input v-model="LoginForm.username" prefix-icon="el-icon-user">
          </el-input
          ><!-- 设置模型为表单下的username属性， prefix-icon：设置前缀的头像-->
        </el-form-item>

        <!-- 登录密码 type指的是将类型设置为password -->
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="LoginForm.password"
            prefix-icon="el-icon-lock"
          >
          </el-input
          ><!-- 设置模型为表单下的password属性， prefix-icon：设置前缀的头像-->
        </el-form-item>

        <!-- 为btn嵌套一个div样式，使按钮控件向中对齐 -->
        <div class="btn">
          <!-- 登录按钮 -->
          <el-form-item class="btns">
            <el-button type="primary" @click="submitForm">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 设置底部信息区域 -->
    <div class="login-footer">
      <span>Copyright © 2021-05-10 kk楷楷 All Rights Reserved.</span>
    </div>
  </div>
</template>


<script>
import { login } from "../../api/login"; //导入api封装好的login后端接口方法
export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      fullscreenLoading: false, //loading加载
      //这是登录表单的数据绑定对象,表单数据对象，默认信息
      LoginForm: {
        username: "admin",
        password: "123456",
      },
      //这是表单的验证规则对象，校验验证对象
      LoginForm_Rule: {
        //验证用户名是否合法，blur指的是失去焦点的时候触发
        //校验用户名
        username: [{ validator: validateUsername, trigger: "blur" }],
        //验证密码是否合法
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    //4.13添加新的方法，登录方法
    submitForm() {
      /* 设置登录的效果 */
      const loading = this.$loading({
        lock: true,
        text: "正在登录中......",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        loading.close();
      }, 1000); /* 设置时间为1秒 */

      this.$refs.LoginFormRef.validate((valid) => {
        if (valid) {
          login(this.LoginForm).then((res) => {
            //判断，如果code==200 并且 success==‘success’表示登录成功
            if (res.code == 200 && res.success == "success") {
              //表示登录成功,保存token,
              sessionStorage.setItem("token", res.data.tokenKey); //存放token的值
              sessionStorage.setItem("expire", res.data.expire); //存放token有效时间
              sessionStorage.setItem("createDate", res.data.createDate); //存放创建时间
              this.$message({
                message: res.msg /* 根据后端结果处理类返回的结果输出msg信息 */,
                type: "success",
              });
              this.$router.push("/index"); //如果登录通过则进行页面跳转，首页
            } else {
              this.$message({
                message: res.msg /* 根据后端结果处理类返回的结果输出msg信息 */,
                type: "error",
              });
            }
          });
        } else {
          console.log("错误的登录方式!!!");
          return false;
        }
      });
    },

    //点击重置按钮，重置登录表单，调用的是Vue提供的方法resetFields（）
    resetLoginForm() {
      this.$refs.LoginFormRef.resetFields();
    },
  },
};
</script>


 <!--lang需要将L设置为大写，否则会出错-->
<style Lang="less" scoped>
@import "../../assets/css/style/login/login.css"; /* 520修改css */
</style>